<template>
  <div class="bigbox">
    <!-- <div class="topbox" :style="{ height: isheight + 'px' }">
      <el-form
        :model="form"
        ref="form"
        :inline="true"
        label-position="right"
        label-width="70px"
        onsubmit="return false"
      >
        <el-col :span="6">
          <el-form-item label="用电企业">
            <el-select
              v-model="bizOrgName"
              style="width: 100%"
              size="small"
              ref="shou1"
            >
              <el-option
                class="option"
                hidden
                :label="form.bizOrgName"
                :value="bizOrgName"
                suffix-icon="el-icon-date"
              >
              </el-option>
              <el-input
                style="width: 90%; margin-left: 5%"
                placeholder="输入关键字进行过滤"
                v-model="filterText"
              />
              <el-tree
                :props="props"
                :data="options"
                :filter-node-method="filterNode"
                @node-click="handleNodeClick"
                ref="tree"
              >
              </el-tree>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6"> </el-col>
        <el-col :span="6"> </el-col>
        <el-col :span="6">
          <el-form-item>
            <div style="text-align: !important">
              <button @click="chongzhi" class="button">重置</button>
              <button @click="filterOptions" class="button chaxun">查询</button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </div> -->
    <div class="bodybox" v-loading='spinning'>
      <div class="form-item-li">
        <ul>
          <li @click="redrect(item.id)" v-for="item in list" :key="item.id">
            <div class="jiexian">
              <img src="@/assets/image/hookup.png" alt="" />
            </div>
            <div :style="{ maxWidth: '200px' }">{{ item.name }}</div>
            <div class="smallImg">
              <img
                v-if="item.isExistGraphDir"
                src="@/assets/image/hasHookup.png"
              />
              <img v-else src="@/assets/image/noHookup.png" />
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
// import { saveAs } from 'file-saver'
import { getFacilityInformation } from '@/api/layout'
export default {
  name: 'ConfigureIndex',
  data () {
    return {
      orgNo: '',
      //   bizOrgName: '',
      //   filterText: '',
      //   isheight: 72,
      list: [],
      //   options: [],
      //   iissize: 'medium',
      //   props: {
      //     children: 'children',
      //     label: 'name'
      //   },
      spinning: false
    //   orgType: ''
    }
  },
  //   watch: {
  //     filterText (val) {
  //       this.$refs.tree.filter(val)
  //     }
  //   },
  async created () {
    // await this.companyInfo()
    // await this.companyChildren();
    // this.bizOrgName = this.options[0].name
    // this.orgNo = this.options[0].id
    const queryString = window.location.search
    const urlParams = new URLSearchParams(queryString)
    const id = urlParams.get('id')
    this.filterOptions(id)
  },
  async mounted () {},
  methods: {
    // async companyInfo () {
    //   const res = await getCompanyInfo()
    //   this.options = res.data.list
    //   console.log('op', this.options)
    //   this.company = res.data.list[0].id
    //   // console.log(this.company);
    // },
    // 单位下所有设备信息
    async filterOptions (id) {
      this.spinning = true
      const res = await getFacilityInformation(id)
      this.list = res.data?.list
      console.log('list', this.list)
      this.spinning = false
    },
    // 刷新列表
    shuaxin () {
    //   this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    command (val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 树组件懒加载
    // async loadNode (node, resolve) {
    // //   const re = await getloginuserapi()
    // //   if (re.data.entity.orgType !== '04' && re.data.entity.orgType !== '40') {
    // //     const res = await gettreelist()
    // //     if (node.level === 0) {
    // //       // 初始的级数（最顶层）
    // //       return resolve(res?.data.list) // 最顶层数据渲染为region
    // //     }
    // //     const ress = await gettreexiaji({ orgNo: node.data.bizOrgNo })
    // //     if (node.level === 1) {
    // //       return resolve(ress?.data.list)
    // //     } else if (node.level === 2) {
    // //       return resolve([])
    // //     }
    // //   } else {
    // //     if (node.level === 0) {
    // //       const res = await getyonghuxialaapi()
    // //       console.log(res)
    // //       return resolve(res?.data.list)
    // //     } else {
    // //       return resolve([])
    // //     }
    // //   }
    // },
    // 树节点过滤
    filterNode (value, data) {
      if (!value) return true
      return data.bizOrgName.indexOf(value) !== -1
    },
    handleNodeClick (val) {
      this.bizOrgName = val.name
      this.orgNo = val.id
      this.$refs.shou1.blur()
    },
    chongzhi () {
      this.value = this.options[0].id
      this.filterOptions()
    },
    redrect (id) {
      console.log(id)
      location.href = `http://47.111.68.240/graph/single-graph-viewer?stationId=${id}`
    }
  }
}
</script>

<style lang="scss" scoped>
.option {
  height: auto;
}
.bigbox {
  background-color: #f1f1f1;
  padding: 10px;
//   .topbox {
//     background-color: #fff;
//     padding: 20px 20px 0 0px;
//     box-sizing: border-box;
//     ::v-deep .el-form-item {
//       width: 100%;
//       margin-left: -10px;
//     }
//     .button {
//       width: 63px;
//       height: 32px;
//       margin-right: 5px;
//       background-color: #fff;
//       border: 1px solid #ccc;
//       border-radius: 3px;
//     }
//     .chaxun {
//       background-color: #1890ff;
//       color: #fff;
//     }
//   }
  .bodybox {
    padding-top: 10px;
    // .fenye {
    //   margin-top: 15px;
    //   text-align: right;
    // }
  }
}

::v-deep .el-form-item__content {
  width: calc(100% - 100px);
}
.bodybox {
  background-color: #fff;
  margin-top: 10px;
  padding: 20px 20px 20px 20px;
}
// ::v-deep .el-col-6 {
//   height: 42px;
//   text-align: right;
// }
// ::v-deep .el-input__inner {
//   height: 30px;
// }
// ::v-deep.el-form--inline {
//   height: 100% !important;
//   box-sizing: border-box;
// }
::v-deep .el-input__icon {
  line-height: 20px;
}

// .dropdown-list {
//   text-align: center;
//   width: 50px;
// }
// .operate {
//   cursor: pointer;
//   color: #1890ff;
// }

button {
  cursor: pointer;
}
.form-item-li {
    width: 100%;
    height: 100%;
    overflow: auto;
    ul {
      display: flex;
      flex-wrap: wrap;
      padding-left: 10px;
      li {
        cursor: pointer;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23%;
        height: 70px;
        background: #ffffff;
        border: 1px solid #bfbfbf;
        margin-bottom: 30px;
        margin-right: 2%;
        &:nth-child(4n + 4) {
          margin-right: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
        .jiexian {
          position: absolute;
          left: 30px;
          width: 40px;
          height: 40px;
          padding-right: 10px;
          border-right: 1px solid #bfbfbf;
        }
        .smallImg {
          position: absolute;
          right: 10px;
          bottom: 10px;
          width: 20px;
          height: 20px;
        }
      }
    }
  }
</style>
